import React, { Component } from 'react';
import CommonHeader from '../../common/jsx/common_header';
import style from './setting.module.css';
import cookie from 'react-cookies';
import { Input, Button, Icon, Upload } from 'antd';
import $ from 'jquery';

function img_getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

class Setting extends Component {
  constructor(props) {
    super(props);
    this.getuserinfo()
  }

  state = {
    bread_base:[
      {name:'其他设置',url:'',p_bread:true},
      {name:'账号设置',url:'/setting'}
    ],
    base_name:'账号设置',
    bread_safe:[
      {name:'其他设置',url:'',p_bread:true},
      {name:'账号安全',url:'/setting'}
    ],
    safe_name:'账号安全',
    header_idx:0,
    imageUrl:'',
    editmod:'',
    username:'',
    email:'',
    nickname:'',
    phone:'',
  }

  path = {
    login:{
        pathname:'/login',
        state:{ifrepathname:true}
    },
  };

  getuserinfo(){
    const that = this;
    $.ajax({
        url:'/login',
        type:'POST',
        dataType:'json',
        data:{
          act:'getuserinfo',
          mid:cookie.load('mid')
        },
        success(e){
          console.log(e)
          if(e.status == 1){
            that.setState({
              username:e.userinfo.username,
              email:e.userinfo.email,
              nickname:e.userinfo.nickname,
              phone:e.userinfo.phone,
              imageUrl:e.userinfo.pic
            }) 
          }else if(e.status == 2){
            alert(e.msg)
            cookie.remove('mid')
            window.location.href = that.path.login
          }
        }
    })
  }

  headerClick=(idx)=>{
    this.setState({
      header_idx:idx
    })
  }

  imghandleChange = info => {    //列表图变换触发事件
    this.fileinput.click()
  };

  openedit=(mod)=>{
    this.setState({
      editmod:mod
    })
  }

  edit_close=()=>{
    this.setState({
      editmod:''
    })
  }

  gosubmit=()=>{  //更新信息
    const that = this;
    $.ajax({
      url:'/login',
      dataType:'json',
      type:'POST',
      data:{
        act:'cuserinfo',
        mid:cookie.load('mid'),
        username:this.state.username,
        email:this.state.email,
        nickname:this.state.nickname,
        phone:this.state.phone,
        pic:this.state.imageUrl
      },
      success(e){
        console.log(e)
        alert(e.msg)
        if(e.status == 1){
          window.location.reload()
        }else if(e.status == 2){
          cookie.remove('mid')
          window.location.href = that.path.login
        }
      }
    })
  }

  filechange=()=>{
    const that = this;
    var formData = new FormData();
    // console.log($('input[name="file"]'))
    formData.append('file',$('input[name="file"]')[0].files[0]);
    $.ajax({  
      url: "/upload",  
      type: "POST",  
      dataType:'json',
      data: formData,    //表单序列化 ,【注意】上传文件的文件流是无法被序列化并传递的
      processData:false,   //  告诉jquery不要处理发送的数据
      contentType:false,    // 告诉jquery不要设置content-Type请求头     
      success:function(e) {  
        console.log(e)
        if(e.status == 'done'){
          that.setState({
            imageUrl:e.imgurl
          })
        }
      }
    });
  }

  cEmail=(e)=>{
    this.setState({
      email:e.target.value
    })    
  }

  cNickname=(e)=>{
    this.setState({
      nickname:e.target.value
    })
  }

  cPhone=(e)=>{
    this.setState({
      phone:e.target.value
    })
  }

  render() { 
    const { imageUrl } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    return (
      <div>
        <CommonHeader bread={this.state.header_idx==0?this.state.bread_base:this.state.bread_safe} title_name={this.state.header_idx==0?this.state.base_name:this.state.safe_name} />
        <div className={style.main}>
          <ul className={style.main_header}>
            <li className={this.state.header_idx==0?style.main_header_act:''} onClick={this.headerClick.bind(this,0)}>基本信息</li>
            <li className={this.state.header_idx==1?style.main_header_act:''} onClick={this.headerClick.bind(this,1)}>账号安全</li>
          </ul>
          <div style={this.state.header_idx==0?{display:'flex'}:{display:'none'}} className={style.content}>
            <div className={style.content_input}>
              <div className={style.content_div}>
                <span>账号：</span>
                <Input disabled placeholder='请输入账号' value={this.state.username}/>
              </div>
              <div className={style.content_div}>
                <span>邮箱：</span>
                <Input placeholder='请输入邮箱' value={this.state.email} onChange={this.cEmail.bind(this)}/>
              </div>
              <div className={style.content_div}>
                <span>昵称：</span>
                <Input placeholder='请输入昵称' value={this.state.nickname} onChange={this.cNickname.bind(this)}/>
              </div>
              <div className={style.content_div}>
                <span>电话号码：</span>
                <Input placeholder='请输入电话号码' value={this.state.phone} onChange={this.cPhone.bind(this)}/>
              </div>
              <Button type="primary" onClick={this.gosubmit} className={style.gosubmit}>更新基本信息</Button>
            </div>
            <div className={style.content_avatar}>
              <div className={style.myavatar}>
                <form id="txupload" action="/upload" method= "post" encType="multipart/form-data" action="">
                  <img onClick={this.imghandleChange} src={imageUrl!=''?imageUrl:require('../../common/images/avatar.png')} alt=""/>
                  <input ref={e=>this.fileinput=e} name='file' type="file" hidden='hidden' onChange={this.filechange}/>
                </form>
              </div>
              <span onClick={this.imghandleChange} className={style.change_avatar}>修改头像</span>
            </div>
          </div>

          <div style={this.state.header_idx==1?{display:'flex'}:{display:'none'}} className={style.safe}>
            <ul className={style.safe_ul}>
              <li>
                <div className={style.li_div}>
                  <span>密码安全</span>
                  <p>当前密码强度：强</p>
                </div>
                <span onClick={this.openedit.bind(this,'password')} className={style.xiugai}>修改</span>
              </li>
              <li>
                <div className={style.li_div}>
                  <span>密保手机</span>
                  <p>已绑定手机：138 **** 8293</p>
                </div>
                <span onClick={this.openedit.bind(this,'phone')} className={style.xiugai}>修改</span>
              </li>
            </ul>
            <div style={this.state.editmod != ''?{display:'flex'}:{display:'none'}} className={style.edit}>
              <div style={this.state.editmod == 'password'?{display:'block'}:{display:'none'}} className={style.password}>
                <div className={style.edit_header}>修改密码<Icon onClick={this.edit_close} className={style.edit_close} type='close' /></div>
                <ul className={style.edit_ul}>
                  <li>
                    <span>旧密码</span>
                    <input type="password" placeholder='请输入旧密码'/>
                  </li>
                  <li>
                    <span>新密码</span>
                    <input type="password" placeholder='请输入新密码'/>
                  </li>
                  <li>
                    <span>确认密码</span>
                    <input type="password" placeholder='请输入新密码'/>
                  </li>
                </ul>
                <div className={style.button}>
                  <Button type="primary">保存</Button>
                  <Button>取消</Button>
                </div>
              </div>
              <div style={this.state.editmod == 'phone'?{display:'block'}:{display:'none'}} className={style.phone}>
                <div className={style.edit_header}>密保手机<Icon onClick={this.edit_close} className={style.edit_close} type='close' /></div>
                <ul className={style.edit_ul}>
                  <li>
                    <span>旧手机号</span>
                    <input type="password" placeholder='请输入旧手机号'/>
                  </li>
                  <li className={style.yzm}>
                    <span>验证码</span>
                    <input type="password" placeholder='请输入验证码'/>
                    <p>发送验证码</p> 
                  </li>
                  <li>
                    <span>新手机号</span>
                    <input type="password" placeholder='请输入新手机号'/>
                  </li>
                </ul>
                <div className={style.button}>
                  <Button type="primary">保存</Button>
                  <Button>取消</Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
 
export default Setting;